<template>
  <div class="empower-list">
    <el-form
      :model="tableData"
      :show-message="false"
      class="empowerList"
      :rules="rules"
    >
      <div class="btn">
        <el-button
          type="text"
          icon="el-icon-plus"
          @click="addRol">增加</el-button>
        <el-button
          type="text"
          @click="addRol">批量添加</el-button>
      </div>
      <div class="empower-list-table">
        <el-table
          :data="tableData.dataList"
          class="empowerTab"
          height="350px">
          <el-table-column
            type="index"
            label="序号"
            width="80"/>
          <el-table-column
            label="产品线/产品线编码"
            width="240">
            <template slot-scope="scope">
              <el-form-item
                :prop="'.dataList[' + scope.$index + '].projectLine'"
                :rules="rules.projectLine"
              >
                <el-select
                  v-model="tableData.dataList[scope.$index].projectLine"
                  placeholder="请选择">
                  <el-option
                    v-for="item in cities"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left;">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="分类"
            width="240">
            <template slot-scope="scope">
              <el-form-item
                :prop="'.dataList[' + scope.$index + '].class'"
                :rules="rules.class">
                <el-cascader
                  :options="options"
                  v-model="tableData.dataList[scope.$index].class"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="产品名称"
            width="240">
            <template slot-scope="scope">
              <el-form-item
                :prop="'.dataList[' + scope.$index + '].projectName'"
                :rules="rules.projectName"
              >
                <el-input
                  v-model="tableData.dataList[scope.$index].projectName"
                  placeholder="请输入产品名称"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="产品编码"
            width="240">
            <template slot-scope="scope">
              <el-form-item
                :prop="'.dataList[' + scope.$index + '].projectNumber'"
                :rules="rules.projectNumber"
              >
                <el-input
                  v-model="tableData.dataList[scope.$index].projectNumber"
                  placeholder="请输入产品编码"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="注册证"
            width="240">
            <template slot-scope="scope">
              <el-form-item
                :prop="'.dataList[' + scope.$index + '].signing'"
                :rules="rules.signing">
                <el-input
                  v-model="tableData.dataList[scope.$index].signing"
                  placeholder="请输入注册证"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text text-danger"
                @click="deleteRol(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'AreaTab',
  data () {
    return {
      tableData: {
        dataList: [
          {
            projectLine: '', // 产品线
            projectNumber: '', // 产品编码
            projectName: '', // 产品名称
            class: [], // 分类
            signing: '' // 注册证
          }
        ]
      },
      rules: {
        projectLine: [
          { required: true, message: '请选择产品线', trigger: 'change' }
        ],
        projectNumber: [
          { required: true, message: '请输入产品编码', trigger: 'blur' }
        ],
        projectName: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        class: [{ required: true, message: '请选择分类', trigger: 'change' }],
        signing: [{ required: true, message: '请输入注册证', trigger: 'blur' }]
      },
      selectedOptions: '', // 级联选择器data
      // 级联选择器数据
      cities: [
        {
          value: '产品线一',
          label: '123123123'
        },
        {
          value: '产品线二',
          label: '345345'
        },
        {
          value: '产品线三',
          label: '567567'
        },
        {
          value: '产品线四',
          label: '789789'
        },
        {
          value: '产品线五',
          label: '90-90-'
        },
        {
          value: '产品线六',
          label: 'asdas'
        }
      ],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                },
                {
                  value: 'xiaolv',
                  label: '效率'
                },
                {
                  value: 'kekong',
                  label: '可控'
                }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }
              ]
            }
          ]
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                {
                  value: 'layout',
                  label: 'Layout 布局'
                },
                {
                  value: 'color',
                  label: 'Color 色彩'
                },
                {
                  value: 'typography',
                  label: 'Typography 字体'
                },
                {
                  value: 'icon',
                  label: 'Icon 图标'
                },
                {
                  value: 'button',
                  label: 'Button 按钮'
                }
              ]
            },
            {
              value: 'form',
              label: 'Form',
              children: [
                {
                  value: 'radio',
                  label: 'Radio 单选框'
                },
                {
                  value: 'checkbox',
                  label: 'Checkbox 多选框'
                },
                {
                  value: 'input',
                  label: 'Input 输入框'
                },
                {
                  value: 'input-number',
                  label: 'InputNumber 计数器'
                },
                {
                  value: 'select',
                  label: 'Select 选择器'
                },
                {
                  value: 'cascader',
                  label: 'Cascader 级联选择器'
                },
                {
                  value: 'switch',
                  label: 'Switch 开关'
                },
                {
                  value: 'slider',
                  label: 'Slider 滑块'
                },
                {
                  value: 'time-picker',
                  label: 'TimePicker 时间选择器'
                },
                {
                  value: 'date-picker',
                  label: 'DatePicker 日期选择器'
                },
                {
                  value: 'datetime-picker',
                  label: 'DateTimePicker 日期时间选择器'
                },
                {
                  value: 'upload',
                  label: 'Upload 上传'
                },
                {
                  value: 'rate',
                  label: 'Rate 评分'
                },
                {
                  value: 'form',
                  label: 'Form 表单'
                }
              ]
            },
            {
              value: 'data',
              label: 'Data',
              children: [
                {
                  value: 'table',
                  label: 'Table 表格'
                },
                {
                  value: 'tag',
                  label: 'Tag 标签'
                },
                {
                  value: 'progress',
                  label: 'Progress 进度条'
                },
                {
                  value: 'tree',
                  label: 'Tree 树形控件'
                },
                {
                  value: 'pagination',
                  label: 'Pagination 分页'
                },
                {
                  value: 'badge',
                  label: 'Badge 标记'
                }
              ]
            },
            {
              value: 'notice',
              label: 'Notice',
              children: [
                {
                  value: 'alert',
                  label: 'Alert 警告'
                },
                {
                  value: 'loading',
                  label: 'Loading 加载'
                },
                {
                  value: 'message',
                  label: 'Message 消息提示'
                },
                {
                  value: 'message-box',
                  label: 'MessageBox 弹框'
                },
                {
                  value: 'notification',
                  label: 'Notification 通知'
                }
              ]
            },
            {
              value: 'navigation',
              label: 'Navigation',
              children: [
                {
                  value: 'menu',
                  label: 'NavMenu 导航菜单'
                },
                {
                  value: 'tabs',
                  label: 'Tabs 标签页'
                },
                {
                  value: 'breadcrumb',
                  label: 'Breadcrumb 面包屑'
                },
                {
                  value: 'dropdown',
                  label: 'Dropdown 下拉菜单'
                },
                {
                  value: 'steps',
                  label: 'Steps 步骤条'
                }
              ]
            },
            {
              value: 'others',
              label: 'Others',
              children: [
                {
                  value: 'dialog',
                  label: 'Dialog 对话框'
                },
                {
                  value: 'tooltip',
                  label: 'Tooltip 文字提示'
                },
                {
                  value: 'popover',
                  label: 'Popover 弹出框'
                },
                {
                  value: 'card',
                  label: 'Card 卡片'
                },
                {
                  value: 'carousel',
                  label: 'Carousel 走马灯'
                },
                {
                  value: 'collapse',
                  label: 'Collapse 折叠面板'
                }
              ]
            }
          ]
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components'
            },
            {
              value: 'sketch',
              label: 'Sketch Templates'
            },
            {
              value: 'jiaohu',
              label: '组件交互文档'
            }
          ]
        }
      ],
      value6: ''
    }
  },
  mounted () {},
  methods: {
    addRol () {
      this.tableData.dataList.push({
        Province: '',
        city: '',
        hospitalName: '',
        cities: []
      })
    },
    deleteRol (index) {
      this.tableData.dataList.splice(index, 1)
    }
  }
}
</script>

<style lang="less">
.empower-list {
  display: flex;
  flex-direction: column;
  // flex: 1;
  // border: 1px solid red;
  height: 100%;

  .empower-list-table {
    flex: 1;
  }

  .el-table__body {
    td {
      .cell {
        padding: 0;

        .el-form-item {
          margin: 0;
        }
      }
    }
  }
}
</style>
